import React, {
    Component
} from "react";
import GridTable from '../../components/display/gridTable';
import {
    stationList
} from "../../fetch/fetchApi";
import {
    Button,
    Input,
    Row,
    Col,
    Select,
    Divider,
    Modal,
    Form,
    Upload,
    Icon,
    Progress,
    DatePicker,
    message,
    Spin,
    Tooltip
} from 'antd';
import StubDetail from '../operation/stubQuery/stubDetail';
import {
    StationType,
    OperateType
} from '../contant';

const Option = Select.Option;
const FormItem = Form.Item;
const {
    TextArea
} = Input;
const {
    RangePicker
} = DatePicker;

class StationQuery extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            data: [],
            pagination: {},
            loading: false,
            visible: false
        };
    }

    componentDidMount() {
        this.fetch();
    }


    init() {
        this.query = {
            page: 1,
            pagecount: 10
        };

        this.tableColumns = [{
            title: '电站名称',
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
            width: 100,
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text} >
                    {text}
                </Tooltip>)
        }, {
            title: '直流数',
            dataIndex: 'dcStubCnt',
            key: 'dcStubCnt',
        }, {
            title: '交流数',
            dataIndex: 'acStubCnt',
            key: 'acStubCnt',
        }, {
            title: '计费标准',
            dataIndex: 'totalFeeInfo',
            key: 'totalFeeInfo',
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text && text.replace(/#/g, '\n')} >
                    {text}
                </Tooltip>)
        }, {
            title: '电站城市',
            dataIndex: 'cityStr',
            key: 'cityStr',
        }, {
            title: '运营类型',
            dataIndex: 'type',
            key: 'type',
            render: (text, record) => (
                <div>{OperateType.map((item, index) => {
                    if (item.id === text.toString()) {
                        return item.name
                    }
                })}</div>)
        }, {
            title: '电站类型',
            dataIndex: 'stubGroupType',
            key: 'stubGroupType',
            render: (text, record) => (
                <div>{StationType.map((item, index) => {
                    if (item.id === text.toString()) {
                        return item.name
                    }
                })}</div>)
        }, {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 100,
            render: (text, record) => (
                <div className="action-wrap">
                    <a href="javascript:void(0);" onClick={() => this.showDetailModal(record.key, '电站详情')}>电站详情</a>
                    <Divider type="vertical" />
                    <a href="javascript:void(0);" onClick={() => this.openTab({
                        'keyId': record.key,
                        'stubGroupId': record.key
                    }, {
                        'key': '010202',
                        titleText: '电桩列表'
                    })}>电桩列表</a>
                </div>
            )
        }];

    }

    showDetailModal = (stubGroupId) => {
        this.setState({
            stubVisible: true,
            stubGroupId: stubGroupId
        })
    }

    queryHandler = () => {
        this.query["page"] = 1;
        this.fetch();
    }

    fetch = (params = {}) => {
        this.setState({
            loading: true
        });
        stationList(this.query).then((res) => {
            if (!res) {
                return;
            }
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = params.current || 1;
            pagination.onChange = (page, pageSize) => {
                this.query["page"] = page;
                this.query["pagecount"] = pageSize;
                this.fetch({
                    current: page
                });
            }
            let dataSource = res.data.data;
            this.setState({
                loading: false,
                data: dataSource,
                pagination
            });
        })
    }

    handleStubModalCancel = () => {
        this.setState({
            stubVisible: false
        })
    }

    handleStubDetail = () => {
        this.setState({
            stubGroupId: ""
        })
    }

    handleInputChange = (type, e) => {
        this.query[type] = e.target.value;
    }

    openTab(param, e) {

        this.props.onAdd.bind(window.LayoutTab)(e, param);
    }

    render() {
        const formItemLayout = {
            wrapperCol: {
                span: 16,
                offset: 4
            }
        };

        const Content = <div className="sc-page-content">
            <div className="page-toolbar">
                <Row gutter={8}>
                    <Col lg={5} xl={5} className="whole-fill">
                        <Input placeholder="电桩编号精确查询" onChange={(e) => this.handleInputChange("stubId", e)}/>
                    </Col>
                    <Col lg={5} xl={5} className="whole-fill">
                        <Input placeholder="电站名称查询" onChange={(e) => this.handleInputChange("keywords", e)}/>
                    </Col>
                    <div className={'button-inlineBlock'}>
                        <Button type="primary" onClick={this.queryHandler}>查询</Button>
                    </div>
                </Row>
            </div>
            <div className="page-panel">
                <GridTable postyle="table-center" data={this.state.data} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
            </div>
            <Modal width="800px" title="电站详情" visible={this.state.stubVisible} footer={null} onCancel={this.handleStubModalCancel}>
                <StubDetail stubGroupId={this.state.stubGroupId} handle={this.handleStubDetail}/>
            </Modal>
        </div>;

        return Content;
    }
}

export default StationQuery;